<template>
    <view class="wrap">
        <!-- 设备区域容器，包含所有设备卡片 -->
        <view class="dev-area">
            <!-- 喷料量设备卡片，点击时跳转到折线图页面 -->
            <view class="dev-cart" @click="goLineChartTemp">
                <view class="">
                    <!-- 设备名称 -->
                    <view class="dev-name">喷料量</view>
                    <!-- 设备图标 -->
                    <image class="dev-logo" src="../../static/weight.png" mode=""></image>
                </view>
                <!-- 显示重量数据 -->
                <view class="dev-data">{{weight2}} g</view>
            </view>

            <!-- 重量设备卡片，点击时跳转到折线图页面 -->
            <view class="dev-cart" @click="goLineChartHumi">
                <view class="">
                    <!-- 设备名称 -->
                    <view class="dev-name">总重量</view>
                    <!-- 设备图标 -->
                    <image class="dev-logo" src="../../static/weight.png" mode=""></image>
                </view>
                <!-- 显示重量数据 -->
                <view class="dev-data">{{weight}} g</view>
            </view>
			
			<!-- 设定重量 -->
			<view class="dev-card">
			  <view class="dev-content">
			    <view class="dev-weight">设定重量</view>
			    <input class="dev-input" type="number" v-model="setWeight" placeholder="输入重量" />
			    <button class="dev-button" @click="setWeightValue">设定</button>
			  </view>
			</view>
			
            
            <view class="dev-cart">
                <view class="">
                    <!-- 设备名称 -->
                    <view class="dev-name">开关</view>
                    <!-- 设备图标 -->
                    <image class="dev-logo" src="../../static/motor.png" mode=""></image>
                </view>
                <!-- 电机开关组件 -->
                <switch :checked="motor" @change="onLedSwitch" color="#2b9939"/>
            </view>
			
			<!-- 额外服务卡片 -->
			
			
        </view>
    </view>
</template>


<script>
    // 引入创建令牌的函数
    const { createCommonToken } = require('@/key.js')
	
	const my_product_id = "qQNSyhm08Q" //填自己产品号
	const my_device_name = "feed_car"	//填自己设备号
	
    export default {
        data() {
            return {
                // 温度数据
                weight2: '',
                // 湿度数据
                weight: '',
                // 台灯状态
                motor: true,
                // 认证令牌
                token: '',
            }
        },
        onLoad() {
            // 页面加载时生成认证令牌
            const params = {
				// 填自己用户秘钥
                author_key: 'lsDnlYY8w36QG3kKd9xsZ2tFuJE0jKFTTn6JaguxjMAdNqLCIfeU3wzzGWcV7UGX',
				// 版本号不用改
                version: '2022-05-01',
				// 填自己用户id
                user_id: '365922',
            }
            this.token = createCommonToken(params);
        },
        onShow() {
            // 页面显示时，首次和定时获取设备数据
            this.fetchDevData();
            setInterval(()=>{
                this.fetchDevData();
            }, 3000) // 每3秒刷新一次数据
        },
        methods: {
            // 获取设备数据的方法
            fetchDevData() {
                uni.request({
                    url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', // 示例接口地址
                    method: 'GET',
                    data: {
                        product_id: 'qQNSyhm08Q',
                        device_name: 'feed_car'
                    },
                    header: {
                        'authorization': this.token // 使用认证令牌
                    },
                    success: (res) => {
                        
                        console.log(res.data);
                        this.weight2 = res.data.data[3].value;
                        this.weight = res.data.data[2].value;
                        this.motor = res.data.data[0].value === 'true';
                    }
                });
            },
			setWeightValue() {
			  if (this.setWeight && this.setWeight > 0) {
			    const weightValue = parseInt(this.setWeight, 10);
			    uni.request({
			      url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',  
			      method: 'POST',
			      data: {
			        product_id: 'qQNSyhm08Q',
			        device_name: 'feed_car',
			        params: {
			          weight: weightValue,
			        },
			      },
			      header: {
			        authorization: this.token,
			        'Content-Type': 'application/json',
			      },
			      success: (res) => {
			        console.log('重量设定成功', res);
			      },
			      fail: (err) => {
			        console.error('重量设定失败', err);
			      },
			    });
			  } else {
			    console.error('请输入有效的重量值');
			  }
			},
            // 台灯状态改变时的处理方法
            onmotor(event) {
              console.log(event.detail.value);
              const motorStatus = event.detail.value;
              uni.request({
                url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',  
                method: 'POST',
                data: {
                  product_id: 'qQNSyhm08Q',
                  device_name: 'feed_car',
                  params: {
                    motor: motorStatus,
                  },
                },
                header: {
                  authorization: this.token,
                },
                success: (res) => {
                  console.log('Motor status updated:', motorStatus);
                },
                fail: (error) => {
                  console.error('控制motor失败', error);
                },
              });
            },
            // 跳转到折线图页面的方法
            goLineChartHumi() {
                // 将认证令牌存储在本地，供其他页面使用
                uni.setStorageSync('token', this.token);
                // 页面跳转
                uni.navigateTo({
                    url:`../LineChartHumi/LineChartHumi`
                });
            },
			goLineChartTemp() {
			    // 将认证令牌存储在本地，供其他页面使用
			    uni.setStorageSync('token', this.token);
			    // 页面跳转
			    uni.navigateTo({
			        url:`../LineChartTemp/LineChartTemp`
			    });
			},
        }
    }
</script>


<style>
    .wrap {
        padding: 30rpx;
    }

    .dev-area {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dev-cart {
        height: 150rpx;
        width: 320rpx;
        border-radius: 30rpx;
        margin-top: 30rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 0 15rpx #ccc;
    }

    .dev-name, .dev-data {
        font-size: 20rpx;
        text-align: center;
        color: #6d6d6d;
    }

    .dev-logo {
        width: 70rpx;
        height: 70rpx;
        margin-top: 10rpx;
    }

    .dev-data {
        font-size: 50rpx;
    }
</style>
